﻿<div style="background-color: var(--neutral-layer-3); overflow: auto; resize: vertical; height: 295px; padding: 10px;">
    <FluentStack Orientation="Orientation.Vertical" Style="height: 100%;">
        <FluentSwitch @bind-Value="_showSearch" CheckedMessage="Show" UncheckedMessage="Hide" Label="Show search in popover" />
        <FluentAppBar Style="height: 100%; background-color: var(--neutral-layer-2);" PopoverVisibilityChanged="HandlePopover" PopoverShowSearch="@_showSearch">

            <FluentAppBarItem Href="/AppBarDefault"
                              Match="NavLinkMatch.All"
                              IconRest="ResourcesIcon()"
                              IconActive="ResourcesIcon(active: true)"
                              Text="Resources" />
            <FluentAppBarItem Href="/AppBar"
                              IconRest="ConsoleLogsIcon()"
                              IconActive="ConsoleLogsIcon(active: true)"
                              Text="Console Logs" />

            <FluentAppBarItem Href="/StructuredLogs"
                              IconRest="StructuredLogsIcon()"
                              IconActive="StructuredLogsIcon(active: true)"
                              Text="Logs"
                              Tooltip="Structured Logs"
                              Count="4"/>
            <FluentAppBarItem Href="/Traces"
                              IconRest="TracesIcon()"
                              IconActive="TracesIcon(active: true)"
                              Text="Traces" />
            <FluentAppBarItem Href="/Metrics"
                              IconRest="MetricsIcon()"
                              IconActive="MetricsIcon(active: true)"
                              Text="Metrics" />
            <FluentAppBarItem Href="/AppBarPage"
                              IconRest="ResourcesIcon()"
                              IconActive="ResourcesIcon(active: true)"
                              Text="Resources 2" />
            <FluentAppBarItem Href="/AppBar"
                              IconRest="ConsoleLogsIcon()"
                              IconActive="ConsoleLogsIcon(active: true)"
                              Text="Console Logs 2" />

            <FluentAppBarItem Href="/StructuredLogs"
                              IconRest="StructuredLogsIcon()"
                              IconActive="StructuredLogsIcon(active: true)"
                              Text="Structured Logs 2" />
            <FluentAppBarItem Href="/Traces"
                              IconRest="TracesIcon()"
                              IconActive="TracesIcon(active: true)"
                              Text="Traces 2" />
            <FluentAppBarItem Href="/Metrics"
                              IconRest="MetricsIcon()"
                              IconActive="MetricsIcon(active: true)"
                              Text="Metrics 2" />
            <FluentAppBarItem Href="/AppBarPage"
                              IconRest="ResourcesIcon()"
                              IconActive="ResourcesIcon(active: true)"
                              Text="Resources 3" />
            <FluentAppBarItem Href="/AppBar"
                              IconRest="ConsoleLogsIcon()"
                              IconActive="ConsoleLogsIcon(active: true)"
                              Text="Console Logs 3" />

            <FluentAppBarItem Href="/StructuredLogs"
                              IconRest="StructuredLogsIcon()"
                              IconActive="StructuredLogsIcon(active: true)"
                              Text="Structured Logs 3" />
            <FluentAppBarItem Href="/Traces"
                              IconRest="TracesIcon()"
                              IconActive="TracesIcon(active: true)"
                              Text="Traces 3" />
            <FluentAppBarItem Href="/Metrics"
                              IconRest="MetricsIcon()"
                              IconActive="MetricsIcon(active: true)"
                              Text="Metrics 3" />
        </FluentAppBar>
    </FluentStack>
</div>


@code {

    private bool _showSearch = true;

    private static Icon ResourcesIcon(bool active = false) =>
        active ? new Icons.Filled.Size24.AppFolder()
               : new Icons.Regular.Size24.AppFolder();

    private static Icon ConsoleLogsIcon(bool active = false) =>
        active ? new Icons.Filled.Size24.SlideText()
               : new Icons.Regular.Size24.SlideText();

    private static Icon StructuredLogsIcon(bool active = false) =>
        active ? new Icons.Filled.Size24.SlideTextSparkle()
               : new Icons.Regular.Size24.SlideTextSparkle();

    private static Icon TracesIcon(bool active = false) =>
        active ? new Icons.Filled.Size24.GanttChart()
               : new Icons.Regular.Size24.GanttChart();

    private static Icon MetricsIcon(bool active = false) =>
        active ? new Icons.Filled.Size24.ChartMultiple()
               : new Icons.Regular.Size24.ChartMultiple();

    private void HandlePopover(bool visible) => DemoLogger.WriteLine($"Popover visibility changed to {visible}");
}
